import React, { PureComponent } from 'react';
import {
  StyleSheet, View, TouchableNativeFeedback,
} from 'react-native';
import ZlstIcon from './zlst-icons';

class CheckBox extends PureComponent {
  mergeContainerStyle = {}

  mergeIconStyle = {}

  mergeContainerStyleCk = {}

  mergeIconStyleCk = {}

  size = 8

  constructor(props) {
    super(props);
    this.state = {
      // checked: false,
    };
    this._getStyles();
  }

  // 合并自定义样式和外部样式
  _getStyles = () => {
    this.mergeContainerStyle = Object.assign(
      {},
      styles.container,
      this.props.container,
    );
    this.mergeContainerStyleCk = Object.assign(
      {},
      // styles.container,
      styles.containerCk,
      this.props.containerCk,
    );

    this.mergeIconStyle = Object.assign(
      {},
      styles.icon,
      this.props.icon,
    );
    this.mergeIconStyleCk = Object.assign(
      {},
      // styles.icon,
      styles.iconCk,
      this.props.iconCk,
    );

    this.size = this.props.size || this.size;
  }

  // 点击事件
  _checkClick = () => {
    const { checked } = this.props;
    if (this.props.onCheckChange && this.props.onCheckChange(!checked) === 'Function') {
      this.props.onCheckChange(!checked);
    }
    // this.setState({ checked: !checked }, () => {
    //   if (this.props.onCheckChange) {
    //     this.props.onCheckChange(this.state.checked);
    //   }
    // });
  }

  render() {
    // this._assignmentFromPropsCheck();
    // this._getStyles();
    return (
      <TouchableNativeFeedback
        underlayColor="transparent"
        onPress={() => this._checkClick()}
      >
        <View
          style={[
            this.mergeContainerStyle,
            this.props.checked ? this.mergeContainerStyleCk : {},
          ]}
        >
          <ZlstIcon
            style={[
              this.mergeIconStyle,
              this.props.checked ? this.mergeIconStyleCk : {},
            ]}
            name="gouxuan"
            size={this.size}
          />
          {/* <View style={styles.check} /> */}
        </View>
      </TouchableNativeFeedback>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
    borderColor: 'white',
    borderStyle: 'solid',
    borderWidth: 1,
    borderRadius: 12,
  },
  check: {
    color: 'transparent',
    width: 14,
    height: 9,
    borderLeftWidth: 2,
    borderBottomWidth: 2,
    borderColor: 'white',
    transform: [
      {
        translateY: -2,
      },
      {
        rotate: '-50deg',
      },
    ],
  },
  containerCk: {
    backgroundColor: '#207aff',
    borderColor: '#207aff',
  },
  icon: {
    width: this.size,
    color: 'white',
  },
  iconCk: {
    // fontWeight: 'bold',
  },
});

export default CheckBox;
